<template>
  <div class="table_box_hy">
    <div class="zntz_title">站内通知</div>
    <div class="zntz_xl">
      <span>分类筛选</span>
      <el-select
        v-model="formdata.search"
        placeholder="请选择"
        size="small"
        @change="onChange()"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div class="zntz_nr_box">
      <div
        class="zntz_nr"
        @click="handleClick(item)"
        v-for="(item, index) in list"
        :key="index"
        @mouseenter="handleMouseEnter(index)"
        @mouseleave="handleMouseLeave(index)"
      >
        <div
          class="zntz_nr_item"
          :ref="`inrboxtem-${index}`"
          :style="{ color: item.view_status == 1 ? '#a39d9d' : '' }"
        >
          <!-- •机构备案、会员入会与机构登记服务流程机构备案、会员入会与机构登记服务流程机构备案、会员入会与机构登记服务流程得得得得得得 -->
          <span> • </span>
          <span>{{ item.title }}</span>
          <span style="float: right;"> {{ item.createtime }}</span>
        </div>
        
        <div
          class="zntz_nr_button"
          :class="{ zntz_nr_button_yd: item.view_status == 1 }"
          :ref="`buttonbox-${index}`"
        >
          <span v-if="item.view_status == 0">未读</span>
          <span v-else>已读</span>
        </div>
      </div>
      <div class="pagination_hy">
        <el-pagination
          hide-on-single-page
          background
          :pager-count="5"
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          :current-page="formdata.currentPage"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
  <script>
export default {
  data() {
    return {
      options: [
        {
          value: "system",
          label: "系统通知",
        },
        {
          value: "fee",
          label: "缴费",
        },
        {
          value: "meet",
          label: "会议",
        },
        {
          value: "question",
          label: "调查问卷",
        },
        {
          value: "education",
          label: "继续教育",
        },
        {
          value: "credit",
          label: "资信评级",
        },
      ],
      list: [],
      formdata: {
        type: 2,
        search: "",
        currentPage: 1,
      },
      total: 0,
    };
  },
  mounted() {
    this.getinfo();
  },
  methods: {
    /**
     * 下拉框搜索
     */
    onChange() {
      // console.log(this.formdata.search);
      this.formdata.currentPage = 1;
      this.getinfo();
    },
    /**
     * 鼠标移入效果
     * @param {DOM元素的下标} index
     */
    handleMouseEnter(index) {
      let i = `inrboxtem-${index}`;
      const elem = this.$refs[i][0]; // 获取DOM元素
      elem.classList.add("hover_nr"); // 添加class
      let a = `buttonbox-${index}`;
      const ele = this.$refs[a][0];
      ele.classList.add("hover_button");
    },
    /**
     * 鼠标移出效果
     * @param {DOM元素的下标} index
     */
    handleMouseLeave(index) {
      let i = `inrboxtem-${index}`;
      const elem = this.$refs[i][0];
      elem.classList.remove("hover_nr");
      let a = `buttonbox-${index}`;
      const ele = this.$refs[a][0];
      ele.classList.remove("hover_button"); // 移除class
    },
    /**
     * 分页
     * @param {页码} page
     */
    handleCurrentChange(page) {
      // 当分页发生变化时的处理函数
      this.formdata.currentPage = page;
      this.getinfo();
    },
    /**
     * 获取列表
     */
    getinfo() {
      let that = this;
      let data = that.formdata;
      that.$http.post("notice/list", data).then((res) => {
        if (res.code === 1) {
          that.total = res.data.total;
          that.list = res.data.data;
        } else {
          that.total = 0;
          that.list = [];
        }
      });
    },
    /**
     * 跳转详情
     */
    handleClick(e) {
      // console.log(e)
      this.$router.push({ path: "/grzntzxq_1", query: { id: e.id } });
    },
    //  ==
  },
};
</script>
  <style>
.zntz_title {
  height: 0.5rem;
  background: #1954a4;
  padding-left: 0.3375rem;
  line-height: 0.5rem;
  font-size: 0.2rem;
  font-weight: bold;
  color: #ffffff;
}
.zntz_xl {
  font-size: 0.2rem;
  font-weight: 400;
  color: #333333;
  height: 1.0375rem;
  display: flex;
  align-items: center;
  border-bottom: 0.025rem dotted #ddd;
}
.zntz_xl > span {
  margin-right: 0.2rem;
}
.zntz_nr_box {
  font-size: 0.2rem;
  font-weight: 400;
  color: #333333;
}
.zntz_nr {
  height: 0.7375rem;
  border-bottom: 0.025rem dotted #ddd;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 0.0625rem;
  cursor: pointer;
}

.zntz_nr_button {
  width: 1.375rem;
  height: 0.4625rem;
  border: 1.5px solid #1954a4;
  border-radius: 0.075rem;
  text-align: center;
  line-height: 0.4625rem;
  color: #1954a4;
  cursor: pointer;
}
.zntz_nr_button_yd {
  border: 1.5px solid #ddd;
  color: #a39d9d;
}
.zntz_nr_item {
  width: 11.25rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hover_nr {
  color: #1954a4;
}
.hover_button {
  color: #ffffff;
  background: #1954a4;
}
.yuand {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #0000;
}
</style>